<template>
    <div>
        <div class="grant">
            <h3>代金券发放</h3>
            <div class="grant1">
                <p> <span>发放金额</span>
                    <select name="" id="" v-model="price1" class="select_discount">
                        <option value="0" disabled>请选择发放金额</option>
                        <option value="10">10元代金券</option>
                        <option value="20">20元代金券</option>
                        <option value="40">40元代金券</option>
                        <option value="50">50元代金券</option>
                        <option value="70">70元代金券</option>
                        <option value="90">90元代金券</option>
                        <option value="100">100元代金券</option>
                    </select>
                </p>
                <p>
                    <span>有效期限</span>
                    <!-- 选择过期时间 -->
                    <el-date-picker v-model="time_value1" type="datetime" placeholder="Select date and time" />
                </p>
            </div>

        </div>
        <div class="grant">
            <h3>金叶子发放</h3>
            <div class="grant1">

                <p> <span>发放金额</span>
                    <select name="" id="" v-model="price2" class="select_discount">
                        <option value="0" disabled>请选择发放金额</option>
                        <option value="10">10元金叶子</option>
                        <option value="20">20元金叶子</option>
                        <option value="40">40元金叶子</option>
                        <option value="50">50元金叶子</option>
                        <option value="70">70元金叶子</option>
                        <option value="90">90元金叶子</option>
                        <option value="100">100元金叶子</option>
                    </select>
                </p>
                <p>
                    <span>有效期限</span>
                    <!-- 选择过期时间 -->
                    <el-date-picker v-model="time_value2" type="datetime" placeholder="Select date and time" />
                </p>
            </div>

        </div>
        <p class="form_but">
            <el-button type="primary" @click="Add_discounts()">批量发放</el-button>
            <el-button @click="clear()">清空数据</el-button>
        </p>
    </div>

    <div class="grant">
        <el-table :data="user_list" height="250" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="app昵称" width="180" />
            <el-table-column prop="real_name" label="真实名字" width="180" />
            <el-table-column prop="vip_grade" label="VIP等级" width="180" />
            <el-table-column prop="sex" label="性别" width="180">
                <template v-slot="scope">
                    <span>{{ scope.row.sex ? '男' : '女' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="my_coupon" label="优惠卷" width="200">
                <template v-slot="scope">
                    <el-button plain @click="up_dialogVisible1(scope.row.my_coupon)">
                        {{ scope.row.my_coupon.length }}张优惠券
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="my_gladpage" label="黄金叶" width="180">
                <template v-slot="scope">
                    <el-button plain @click="up_dialogVisible2(scope.row.my_gladpage)">
                        {{ scope.row.my_gladpage.length }}张金叶子
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="金券发放" min-width="120">
                <template v-slot="scope">
                    <el-button type="primary" size="small" @click="Add_discount_one(scope.row._id, scope.row.name)">
                        发放
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 4, 5, 6]"
            :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- 弹出对话框展示优惠卷 -->
    <div>
        <el-dialog v-model="dialogVisible1" width="500" draggable>
            <span>优惠券详情</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-table :data="my_coupon_list" :default-sort="{ prop: 'price1', order: 'descending' }"
                        style="width: 100%">
                        <el-table-column prop="price1" label="金额" sortable width="180" />
                        <el-table-column prop="time_value1" label="到期时间">
                            <template v-slot="scope">
                                {{ formatDate(scope.row.time_value1) }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogVisible2" width="500" draggable>
            <span>金叶子详情</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-table :data="my_gladpage_list" :default-sort="{ prop: 'price1', order: 'descending' }"
                        style="width: 100%">
                        <el-table-column prop="price2" label="金额" sortable width="180" />
                        <el-table-column prop="time_value2" label="到期时间">
                            <template v-slot="scope">
                                {{ formatDate(scope.row.time_value2) }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { get_suer_list, add_discount, add_discounts } from '@/request/api/api'
//用户列表
let user_list = ref<any>([])

onMounted(() => {
    get_user()
})

//获取用户列表
const get_user = async () => {
    let res: any = await get_suer_list({ currentPage: currentPage.value, pageSize: pageSize.value })
    user_list.value = res.list
    total.value = res.total
}

//代金券数据
let price1 = ref<number>(0)//金额
let price2 = ref<number>(0)//折扣
//选择过期时间 默认七天时间
const time_value1 = ref<Date>(new Date(+ new Date().getTime() + 7 * 24 * 60 * 60 * 1000))
const time_value2 = ref<Date>(new Date(+ new Date().getTime() + 7 * 24 * 60 * 60 * 1000))

//清空数据
const clear = () => {
    price1.value = 0
    price2.value = 0
    time_value1.value = new Date()
    time_value2.value = new Date()
}


const currentPage = ref(1) //当前页
const pageSize = ref(4) //每页显示条数
const background = ref(false)//是否为分页按钮添加背景色
const disabled = ref(false)//是否禁用分页
const total = ref(1)//总条数

const handleSizeChange = (val: number) => {
    pageSize.value = val
    // console.log(`${val} items per page`)//每页显示条数
    get_user()
}
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    // console.log(`current page: ${val}`)//当前页
    get_user()
}

//添加代金券用户id
let user_id = ref<any>([])
//选中的数据
const handleSelectionChange = (val: any) => {
    let arr = ref([])
    val.forEach(element => {
        arr.value.push(element._id)
    });
    user_id.value = arr
}

//群体发放代金券
const Add_discounts = async () => {
    let ids = user_id.value._value    
    if (ids==undefined) {
        alert('请选择用户')
        return 
    }
    let obj1 = {
        price1: price1.value,
        time_value1: time_value1.value,
    }
    let obj2 = {
        price2: price2.value,
        time_value2: time_value2.value,
    }
    if (obj1.price1 != 0 && obj2.price2 == 0) {
        let r = confirm(`确定发放抵用券到所选用户吗？`)
        if (r) {
            let res = await add_discounts({ ids, obj1, obj2, status: 1 })
        }
    } else if (obj1.price1 == 0 && obj2.price2 != 0) {
        let r = confirm(`确定发放金叶到所选用户吗？`)
        if (r) {
            let res = await add_discounts({ ids, obj1, obj2, status: 2 })
        }
    } else if (obj1.price1 != 0 && obj2.price2 != 0) {
        let r = confirm(`确定发放抵用券和金叶到所选用户吗？`)
        if (r) {
            let res = await add_discounts({ ids, obj1, obj2, status: 3 })
        }
    } else {
        alert('未选择发放的数据')
    }
}


//单独发放用户id
const Add_discount_one = async (_id: string, name: string) => {
    let r = confirm(`确定发放到用户--${name}--吗？`)
    let obj1 = {
        price1: price1.value,
        time_value1: time_value1.value,
    }
    let obj2 = {
        price2: price2.value,
        time_value2: time_value2.value,
    }

    if (obj1.price1 != 0 && obj2.price2 == 0) {
        let r = confirm(`确定发放抵用券到用户--${name}--吗？`)
        console.log(obj1, obj2);
        if (r) {
            let res = await add_discount({ _id, obj1, obj2, status: 1 })
            get_user()
        }
    } else if (obj1.price1 == 0 && obj2.price2 != 0) {
        let r = confirm(`确定发放金叶到用户--${name}--吗？`)
        if (r) {
            let res = await add_discount({ _id, obj1, obj2, status: 2 })
            get_user()
        }
    } else if (obj1.price1 != 0 && obj2.price2 != 0) {
        let r = confirm(`确定发放抵用券和金叶到用户--${name}--吗？`)
        if (r) {
            let res = await add_discount({ _id, obj1, obj2, status: 3 })
            get_user()
        }
    } else {
        alert('未选择发放的数据')
    }
}


//弹出对话框
const dialogVisible1 = ref(false)
const my_coupon_list = ref([])
const up_dialogVisible1 = (my_coupon: any) => {
    my_coupon_list.value = my_coupon
    dialogVisible1.value = true
}
const dialogVisible2 = ref(false)
const my_gladpage_list = ref([])
const up_dialogVisible2 = (my_gladpage: any) => {
    my_gladpage_list.value = my_gladpage
    dialogVisible2.value = true
}
//时间格式转化
function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleString(); // 或者使用其他格式化方法
}
</script>

<style lang="scss" scoped>
.grant {
    width: 95%;
    background-color: #ffffff;
    margin: 1% auto;
    box-shadow: 0 0 5px #ccc;
    display: flex;
    flex-direction: column;
    padding: 0.1rem;
}

.grant1 {
    margin: 0.1rem;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
}

.grant p {
    margin-top: 1%;
}

.grant p span {
    display: inline-block;
    text-align: center;
    font-size: 0.1rem;
    margin-right: 0.05rem;
}

.grant p input {
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: 0.03rem;
    box-sizing: border-box;
    background-color: #fafafa;
    font-size: 0.1rem;
}

.form_but {
    width: 50%;
    margin: auto;
    text-align: center;
}

.el-col {
    text-align: center;
}

.countdown-footer {
    margin-top: 8px;
}

.example-basic .el-date-editor {
    margin: 8px;
}

.demo-pagination-block {
    display: flex;
    justify-content: center;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.select_discount {
    width: 0.9rem;
    height: 0.15rem;
    border-radius: 20px;

}
</style>